<template>
    <div class="user-center">
        <!-- 顶部用户信息 -->
        <div class="user-header">
            <div class="user-info">
                <!-- 未登录状态 -->
                <div v-if="!isLoggedIn" class="login-prompt" @click="goToLogin">
                    <van-image class="user-avatar" round fit="cover"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                    <div class="user-details">
                        <h2>请先登录</h2>
                        <p>点击登录账号</p>
                    </div>
                    <van-icon class="login-arrow" name="arrow" size="16" color="rgba(255,255,255,0.7)" />
                </div>

                <!-- 已登录状态 -->
                <div v-else class="logged-info">
                    <van-image class="user-avatar" round fit="cover"
                        :src="userInfo.useravatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" />
                    <div class="user-details">
                        <h2>{{ userInfo.useraccount }}</h2>
                        <p>{{ hidePhoneNumber(userInfo.phonenumber) }}</p>
                    </div>
                    <!-- 退出登录按钮
                    <van-icon class="logout-icon" name="revoke" size="20" @click="handleLogout" /> -->
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 优惠券和服务卡 -->
            <div class="user-body">
                <van-grid class="coupon-section" :border="false" :column-num="3">
                    <van-grid-item icon="coupon-o" text="优惠券" :badge="couponCount" @click="checkLogin(goToCoupons)" />
                    <van-grid-item icon="description" text="服务卡" @click="checkLogin(goToServiceCards)" />
                    <van-grid-item icon="balance-pay" text="我的钱包" :text="`¥${walletBalance}`"
                        @click="checkLogin(goToWallet)" />
                </van-grid>
            </div>
            
            <!-- 功能列表 -->
            <div class="user-body">
                <van-cell-group class="menu-group">
                    <van-cell title="我的地址" icon="location-o" is-link @click="checkLogin(goToAddress)" />
                    <van-cell title="安全中心" icon="shield-o" is-link @click="checkLogin(goToSecurity)" />
                    <van-cell title="客服中心" icon="service-o" is-link @click="contactCustomerService" />
                    <van-cell title="建议反馈" icon="comment-o" is-link @click="checkLogin(goToFeedback)" />
                    <van-cell title="设置" icon="setting-o" is-link @click="checkLogin(goToSettings)" />
                </van-cell-group>
            </div>
            
            <!-- 角色选择区域 -->
            <div class="user-body">
                <van-cell-group class="menu-group">
                    <van-cell title="我是师傅" icon="user-circle-o" is-link @click="checkLogin(goToMasterEntry)"
                        value="查看如何入驻" />
                    <van-cell title="我是商家" icon="shop-o" is-link @click="downloadBusinessApp" value="下载万师傅企业版App" />
                     <van-cell title="我是管理员" icon="manager-o" is-link @click="admin" />
                </van-cell-group>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="footer-nav">
            <van-tabbar v-model="activeNav" @change="onTabChange">
                <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
                <van-tabbar-item name="category" icon="apps-o" dot>分类</van-tabbar-item>
                <van-tabbar-item name="orderPage" icon="orders-o">订单</van-tabbar-item>
                <van-tabbar-item name="center" icon="user-o">我的</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { showToast, showConfirmDialog} from 'vant'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeNav = ref("center") // 默认选中"我的"标签
const couponCount = ref("")
const walletBalance = ref(256.80)
const userStore = useUserStore();

const userInfo = ref({})

// 计算属性：判断是否已登录
const isLoggedIn = computed(() => {
    return userStore.useraccount && userStore.useraccount !== '未设置'
})

// 退出登录
// const handleLogout = () => {
//     showConfirmDialog({
//         title: '退出登录',
//         message: '确定要退出登录吗？',
//     }).then(() => {
//         // 清除用户信息
//         userStore.clearUserInfo();
//         showToast('已退出登录');
//         // 可以跳转到首页或其他页面
//         // router.push('/home');
//     }).catch(() => {
//         // 取消退出
//     });
// }

// 底部导航切换
const onTabChange = (name) => {
    console.log("切换到底部导航:", name);
    if (name !== 'center') {
        router.push({ name: name })
    }
}

// 登录检查方法
const checkLogin = (callback) => {
    if (!isLoggedIn.value) {
        showConfirmDialog({
            title: '登录提示',
            message: '此操作需要登录后才能继续，是否立即登录？',
            confirmButtonText: '去登录',
            cancelButtonText: '再逛逛',
        })
        .then(() => {
            router.push('/login')
        })
        .catch(() => {
            // 用户取消
        })
        return false
    }
    callback && callback()
    return true
}

// 跳转到登录页
const goToLogin = () => {
    router.push('/login') // 根据你的路由配置调整路径
}

// 方法定义
const goToSettings = () => {
    showToast('跳转到设置页面')
    router.push('/set')
}

const goToCoupons = () => {
    showToast('查看优惠券')
}

const goToServiceCards = () => {
    showToast('查看服务卡')
}

const goToWallet = () => {
    showToast('进入我的钱包')
}

const goToAddress = () => {
    showToast('管理我的地址')
}

const goToSecurity = () => {
    showToast('进入安全中心')
}

const admin=()=>{
    router.push('admin/login')
}

const contactCustomerService = () => {
    showConfirmDialog({
        title: '联系客服',
        message: '是否要拨打客服电话 400-xxx-xxxx？',
    }).then(() => {
        showToast('正在呼叫客服...')
    })
}

const goToFeedback = () => {
    showToast('进入建议反馈')
}

const goToMasterEntry = () => {
    showConfirmDialog({
        title: '师傅入驻',
        message: '您将跳转到师傅入驻页面，了解详细入驻流程',
    }).then(() => {
        showToast('跳转中...')
    })
}

const downloadBusinessApp = () => {
    showConfirmDialog({
        title: '下载企业版',
        message: '是否要下载万师傅企业版App？',
    }).then(() => {
        showToast('开始下载...')
    })
}

onMounted(() => {
    //获取用户信息
    userInfo.value = {
        useraccount: userStore.useraccount || '未设置',
        phonenumber: userStore.phonenumber || '未设置',
        useravatar: userStore.useravatar
    }
})

// 方法：隐藏手机号
const hidePhoneNumber = (phone) => {
    if (!phone || phone === '未设置') return '未设置';
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}
</script>

<style scoped>
.user-center {
    width: 100%;
    padding-bottom: 50px;
    min-height: 100vh;
    background-color: #F7F7F7;
}

.user-header {
    background: #0DB0EE;
    color: white;
    padding: 30px 16px 20px;
    height: 20vh;
    position: relative;
}

.user-info {
    display: flex;
    align-items: center;
}

.login-prompt {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.logged-info {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

/* 退出登录按钮样式 */
.logout-icon {
    position: absolute;
    right: 0;
    top: 0;
    color: white;
    cursor: pointer;
    padding: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.logout-icon:hover {
    background: rgba(255, 255, 255, 0.3);
}

.main-content {
    margin-top: -10vh;
    position: relative;
    z-index: 1;
}

.user-body {
    margin: 0 16px 16px 16px;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.user-avatar {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.user-details h2 {
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 500;
}

.user-details p {
    font-size: 14px;
    opacity: 0.9;
}

.login-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.coupon-section :deep(.van-grid-item:nth-child(1))::after,
.coupon-section :deep(.van-grid-item:nth-child(2))::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background-color: #ebedf0;
}

.menu-group {
    margin: 0;
}

:deep(.van-cell__value) {
    font-size: 12px;
    color: #969799;
}

/* 底部导航样式 */
.footer-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 750px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 999;
}
</style>